<template>
  <div class="c-box">
    <div v-if="tokenInfo == ''">
      <h3>请先登录</h3>
    </div>
    <div v-else>
      <div v-for="item in collectList" :key="item.pid">
        <div class="box">
              <router-link :to="'/pictureinfo/'+ item.pid">
                <div class="left">
                  <span>{{item.name}}</span>
                  <span>{{item.author}}</span>
                </div>
            </router-link>
            <div class="right">
              <button @click="UnCollect(item.pid)">取消收藏</button>
            </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Collect',
  computed: {
    ...mapState(['tokenInfo']),
    ...mapState(['userInfo'])
  },
  data () {
    return {
      collectList: []
    }
  },
  methods: {
    async getCollectList () {
      const { data: res } = await this.$http({
        url: 'picture/getCollectList',
        methods: 'GET',
        params: {
          uid: this.userInfo.id
        }
      })
      this.collectList = res.data
      // console.log(this.collectList)
    },
    // 通过id获取图片信息
    async UnCollect (id) {
      // console.log('aaa')
      await this.$http({
        url: 'picture/pictureUnCollect',
        method: 'GET',
        params: {
          id,
          uid: this.userInfo.id
        }
      })
      this.getCollectList()
    }
  },
  activated () {
    this.getCollectList()
  }
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 1280px) {
  .c-box{
    width: 70%;
    margin: auto;
  }
}
.c-box{
  margin-top: 5%;
}
a{
    color: black;
    text-decoration: none;
  }
.box{
  border: 1px solid orange;
  margin-top: 20px;
  height: 45px;
  line-height: 35px;
  background-color: beige;
  .left{
    width: 70%;
    display: inline-block;
    span{
      margin-left: 40px;
    }
  }
  .right{
    display: inline-block;
    width: 80px;
    margin-left: 70px;
    button{
      height: 35px;
      margin-top: 5px;
      background-color: red;
    }
  }
}

</style>
